<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/echarts.js"></script>
	</head>
	<body>
		<div id="main" style="width: 100%;height: 500px;"></div>
		<script type="text/javascript">
			var chartDom = document.getElementById('main');
			var myChart = echarts.init(chartDom);
			var option = {
				legend: {
					top: 'top'
				},
				tooltip: {
					trigger: 'item',
					formatter: '{a} <br/>{b} : {c} ({d}%)'
				},
				toolbox: {
					show: true,
					feature: {
						mark: {
							show: true
						},
						dataView: {
							show: true,
							readOnly: false
						},
						restore: {
							show: true
						},
						saveAsImage: {
							show: true
						}
					}
				},
				series: [{
					name: '课程',
					type: 'pie',
					radius: [30, 150],
					center: ['50%', '50%'],
					roseType: 'area',
					itemStyle: {
						borderRadius: 8
					},
					data: [{
							value: 40,
							name: 'html'
						},
						{
							value: 38,
							name: 'css'
						},
						{
							value: 32,
							name: 'js'
						},
						{
							value: 30,
							name: 'jquery'
						},
						{
							value: 28,
							name: 'bootstrap'
						},
						{
							value: 26,
							name: 'echarts'
						}
					]
				}]
			};
			myChart.setOption(option);
		</script>
	</body>
</html>
